<template>
	<view class="mine">
		<!-- 头部 -->
		<view class="mine_top" :style="{height:(statusBarHeight+170)+'px'}">
			<image class="mine_top_bg" src="../../static/image/mine/bg.png" mode=""></image>
			<view class="mine_top_items">
				<view class="nav" :style="{height:(statusBarHeight+45)+'px'}"></view>
				<view class="mine_top_items_User" @click="getLogin">
					<view class="mine_top_items_User_left" v-if="user.isLogin">
						<image :src="$wanlshop.oss(user.avatar, 35, 35, 2, 'avatar') + ')'"></image>
					</view>
					<view class="mine_top_items_User_left" v-else>
						<image src="../../static/image/class/touxiang.png"></image>
					</view>
					<view class="mine_top_items_User_right" v-if="user.isLogin">{{ user.nickname }}</view>
					<view class="mine_top_items_User_right" v-else>登录/注册</view>
				</view>
				<view class="mine_top_items_item">
					<view class="mine_top_items_item_demo">
						<view class="num">0</view>
						<view class="text">优惠券</view>
					</view>
					<view class="mine_top_items_item_demo" @click="getCollection">
						<view class="num">{{statistics.dynamic.collection}}</view>
						<view class="text">商品收藏</view>
					</view>
					<view class="mine_top_items_item_demo" @click="getShoppingCart">
						<view class="num">{{cart.cartnum}}</view>
						<view class="text">购物车</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="mine_orders">
			<view class="mine_order">
				<view class="mine_order_left">
					<view class="mine_order_left_image">
						<image src="../../static/image/mine/order.png"></image>
					</view>
					<view class="mine_order_left_title">我的订单</view>
				</view>
				<view class="mine_order_right"  @tap="$wanlshop.auth('../mines/order/order?state=0')">
					<view class="mine_order_right_title">全部订单</view>
					<view class="mine_order_right_image">
						<image src="../../static/image/mine/fanhui.png"></image>
					</view>
				</view>
			</view>
			<view class="mine_order1">
				<view class="mine_order2" @tap="$wanlshop.auth('../mines/order/order?state=1')">
					<image src="../../static/image/mine/daifukaun.png"></image>
					<view class="name">待付款</view>
					<view class="mine_order2_num" v-if="orderNum1 > 0">
						{{ orderNum1}}</view>
				</view>
				<view class="mine_order2" @tap="$wanlshop.auth('../mines/order/order?state=2')">
					<image src="../../static/image/mine/daifahuo.png"></image>
					<view class="name">待发货</view>
					<view class="mine_order2_num" v-if="orderNum2> 0">
						{{ orderNum2 }}</view>
				</view>
				<view class="mine_order2" @tap="$wanlshop.auth('../mines/order/order?state=3')">
					<image src="../../static/image/mine/daishouhuo.png"></image>
					<view class="name">待收货</view>
					<view class="mine_order2_num" v-if="orderNum3 > 0">
						{{orderNum3 }}</view>
				</view>
				<view class="mine_order2" @tap="$wanlshop.auth('../mines/order/order?state=4')">
					<image src="../../static/image/mine/daipingjia.png"></image>
					<view class="name">待评价</view>
					<view class="mine_order2_num" v-if="orderNum4 > 0">
						{{orderNum4 }}</view>
				</view>
			</view>
		</view>
		<!-- 更多设置 -->
		<view class="mine_set">
			<view class="mine_set_installation" @click="getMakeAppointment">
				<view class="mine_set_installation_left">
					<view class="image">
						<image src="../../static/image/mine/installation.png"></image>
					</view>
					<view class="name">预约安装</view>
				</view>
				<view class="mine_set_installation_right">
					<image src="../../static/image/mine/fanhui.png"></image>
				</view>
			</view>
			<view class="mine_set_installation" @click="getMyAddress">
				<view class="mine_set_installation_left">
					<view class="image">
						<image src="../../static/image/mine/address.png"></image>
					</view>
					<view class="name">我的地址</view>
				</view>
				<view class="mine_set_installation_right">
					<image src="../../static/image/mine/fanhui.png"></image>
				</view>
			</view>
			<view class="mine_set_installation" @click="getPhone">
				<view class="mine_set_installation_left">
					<view class="image">
						<image src="../../static/image/mine/custome.png"></image>
					</view>
					<view class="name">客服</view>
				</view>
				<view class="mine_set_installation_right">
					<image src="../../static/image/mine/fanhui.png"></image>
				</view>
			</view>
			<view class="mine_set_installation" @click="getSetUp">
				<view class="mine_set_installation_left">
					<view class="image">
						<image src="../../static/image/mine/setUp.png"></image>
					</view>
					<view class="name">设置</view>
				</view>
				<view class="mine_set_installation_right">
					<image src="../../static/image/mine/fanhui.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				// 导航栏高度
				statusBarHeight: 0,
				
				users:{
					// 判断用户是否登录
					isLogin: '',
				},
				url: '../../static/image/mine/bg.png',
				orderNum1: 0,
				orderNum2: 0,
				orderNum3: 0,
				orderNum4: 0,
			};
		},
		computed: {
			...mapState(['cart', 'user', 'statistics', 'common'])
		},
		methods: {
			// 点击登录跳转到登录页面
			getLogin() {
				if (this.users.isLogin == false) {
					uni.navigateTo({
						url: '../user/logo/logo'
					})
				}
			},
			// 点击预约安装跳转到预约安装页面
			getMakeAppointment() {

				uni.navigateTo({
					url: '../mines/makeAppointment/makeAppointment'
				})
			},
			// 点击全部订单跳转到订单页面
			getOrder1() {
				uni.navigateTo({
					url: '../mines/order/order'
				})
			},

			// 点击我的地址跳转到我的地址页面
			getMyAddress() {
				uni.navigateTo({
					url: '../mines/MyAddress/MyAddress'
				})
			},
			// 点击设置页面跳转到设置页面
			getSetUp() {
				uni.navigateTo({
					url: '../mines/setUp/setUp'
				})
			},
			getCollection() {
				uni.navigateTo({
					url: '../mines/Collection/Collection'
				})
			},
			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						console.log('状态栏高度', res)
					},
				});
			},
			// 点击购入车跳转到购物车页面
			getShoppingCart() {
				uni.reLaunch({
					url: '../shopping_cart/shopping_cart'
				})
			},
			// 拨打客服电话
			getPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '0574-87880789',
					// 成功回调
					success: (res) => {
						// console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			// 获取待付款订单个数
			getOrder1(state) {
				this.$api.get({
					url: '/wanlshop/order/getOrderList',
					data: {
						state: state,
						page: 1
					},
					success: res => {
						this.orderNum1 = res.data.length						
						// console.log('订单状态1', this.orderNum1)
						
						// console.log('订单状态', res)
					}
				});
			},
			// 获取代发货订单个数
			getOrder2(state) {
				this.$api.get({
					url: '/wanlshop/order/getOrderList',
					data: {
						state: state,
						page: 1
					},
					success: res => {						
						this.orderNum2 = res.data.length						
						// console.log('订单状态2', this.orderNum2)
						// console.log('订单状态', res)
					}
				});
			},
			// 获取待收货订单个数
			getOrder3(state) {
				this.$api.get({
					url: '/wanlshop/order/getOrderList',
					data: {
						state: state,
						page: 1
					},
					success: res => {
						this.orderNum3 = res.data.length						
						// console.log('订单状态3', this.orderNum3)
						// console.log('订单状态', res)
					}
				});
			},
			// 获取待评价订单个数
			getOrder4(state) {
				this.$api.get({
					url: '/wanlshop/order/getOrderList',
					data: {
						state: state,
						page: 1
					},
					success: res => {					
						this.orderNum4 = res.data.length
						// console.log('订单状态4', this.orderNum4)
						// console.log('订单状态', res)
					}
				});
			}
		},
		onLoad() {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			// 获取用户信息
			this.users = this.$store.state.user;
		
			// var user=uni.getStorageSync("wanlshop:user");
			// console.log('user',user)
		},
		onShow() {
			// 调用获取订单个数
			if(this.users.isLogin){
				// console.log('12')
				this.getOrder1(1);
				this.getOrder2(2);
				this.getOrder3(3);
				this.getOrder4(4);
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.mine {
		.mine_top {
			width: 750rpx;
			position: relative;

			// background-color: pink;
			// background-size: cover;
			// background-repeat: no-repeat;
			.mine_top_bg {
				width: 100%;
				height: 100%;
			}

			.mine_top_items {
				// background-color:#007AFF ;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;


				.nav {
					// background-color: #FFFFFF;
				}

				&_User {
					// background-color: red;
					display: flex;
					align-items: center;
					margin-left: 40rpx;

					&_left {
						width: 110rpx;
						height: 110rpx;
						background-color: #FFFFFF;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 105rpx;
							height: 105rpx;
							border-radius: 50%;
						}
					}

					&_right {
						font-size: 28rpx;
						// background-color: green;
						color: #FFFFFF;
						width: 450rpx;
						height: 110rpx;
						line-height: 110rpx;
						margin-left: 30rpx;
						//单行文本超出部分隐藏
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}
				}

				&_item {
					width: 750rpx;
					display: flex;
					justify-content: space-around;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-top: 30rpx;

					&_demo {
						width: 200rpx;
						// background-color: pink;
						text-align: center;

						.num {
							font-weight: 600;
							font-size: 28rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}

		}

		.mine_orders {
			background-color: #FFFFFF;
			height: 250rpx;

			.mine_order {
				width: 700rpx;
				margin: 0 auto;
				display: flex;
				height: 100rpx;
				align-items: center;
				justify-content: space-between;

				// background-color: red;
				&_left {
					display: flex;
					align-items: center;
					// background-color: pink;

					&_image {
						width: 35rpx;
						height: 35rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}
					}

					&_title {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #000000;
						font-weight: bold;
					}
				}

				&_right {
					display: flex;
					align-items: center;

					// background-color: pink;
					&_title {
						font-size: 26rpx;
						font-weight: 600;
						color: #000000;
						margin-right: 20rpx;
						// background-color: #4CD964;
					}

					&_image {
						width: 20rpx;
						height: 30rpx;
						// background-color: #007AFF;
						display: flex;
						align-items: center;

						image {
							width: 18rpx;
							height: 28rpx;
						}
					}
				}
			}

			.mine_order1 {
				// background-color: pink;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.mine_order2 {
					width: 150rpx;
					// background-color: red;
					text-align: center;
					position: relative;

					image {
						width: 70rpx;
						height: 70rpx;
					}

					.name {
						font-size: 26rpx;
						color: #4b4b4b;
					}

					.mine_order2_num {
						position: absolute;
						top: -5rpx;
						right: 13rpx;
						width: 35rpx;
						height: 35rpx;
						line-height: 35rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 22rpx;
						background-image: linear-gradient(-90deg, #ff4950 0, #ff8123 100%);
						border-radius: 50%;
					}
				}
			}
		}

		.mine_set {
			background-color: #FFFFFF;
			// height: 500rpx;
			margin-top: 10rpx;

			&_installation {
				width: 750rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				height: 100rpx;
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #F5F5F5;

				&_left {
					display: flex;
					align-items: center;

					.image {
						width: 35rpx;
						height: 35rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}
					}

					.name {
						font-size: 28rpx;
						color: #000000;
						// font-weight:600;
						margin-left: 20rpx;
					}
				}

				&_right {
					width: 30rpx;
					height: 30rpx;
					// background-color: pink;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 18rpx;
						height: 28rpx;
					}
				}

			}
		}
	}
</style>
